<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk" @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible" :title="modalOption.title">
        <a-form-model ref="formData" :model="formData" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <div class="content-box">
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="原料类型" prop="rowMaterialType">
                            <span>{{formData.rawType}}</span>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="入库批号" prop="StorageBatch">
                            <span>{{formData.enterStorageBatch}}</span>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="供应商">
                            <span>{{formData.supplierName}}</span>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="来源" prop="source">
                            <a-select disabled  class="w-300" v-model="formData.source" placeholder="请选择药材来源">
                                <a-select-option value="自培育">自培育</a-select-option>
                                <a-select-option value="野生">野生</a-select-option>
                                <a-select-option value="动物类">动物类</a-select-option>
                                <a-select-option value="矿物类">矿物类</a-select-option>
                                <a-select-option value="特殊类">特殊类</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="品名" prop="varietyName">
                            <div class="btn-input">
                                <a-select class="inside-input" disabled  v-model="formData.varietyName" placeholder="请选择品名">
                                    <a-select-option v-for="(item,i) in varietyNameList" :key="i" :value="item.varietyName">{{ item.varietyName }}</a-select-option>
                                </a-select>
                                <a-button  class="primary-empty-btn yuan-form-item-btn" @click="jump('/xls/#/materialMgt')">档案管理</a-button>
                            </div>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="入库时间" prop="storageDate">
                            <a-date-picker disabled  :locale="locale" class="w-300" valueFormat="YYYY-MM-DD" v-model="formData.enterStorageTime" placeholder="选择日期" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="物料代码" prop="materialCode">
                            <span>{{formData.materialCode}}</span>
                        </a-form-model-item>
                    </a-col>
                    <a-col  :span="8">
                        <a-form-model-item label="入库数量" prop="enterStorageNum">
                            <div class="btn-input">
                                <a-input class="inside-input" disabled v-model="formData.enterStorageNum" placeholder="请输入入库数量"></a-input>
                                <a-select class="btn-selector" disabled v-model="formData.unit">
                                    <a-select-option v-for="item in unitList" :key="item.id" :value="item.unit">{{item.unit}}</a-select-option>
                                </a-select>
                            </div>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="厂家生产批号" prop="productionBatch">
                            <span>{{formData.venderProductionBatch}}</span>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="入库类型" prop="enterStorageType">
                            <a-select disabled class="w-300" v-model="formData.enterStorageType" placeholder="请选择入库类型">
                                <a-select-option value="SY">溯源入库</a-select-option>
                                <a-select-option value="NSY">非溯源入库</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col :span="8">
                        <a-form-model-item label="产地" prop="placeOfOrigin">
                            <a-select disabled class="w-300" v-model="formData.placeOfOrigin" placeholder="请选择产地">
                                <a-select-option v-for="(item,i) in placeOfOriginList" :key="i" :value="item">{{item}}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="仓库" prop="warehouse">
                            <a-select disabled class="w-300" v-model="formData.warehouse" placeholder="请选择仓库"></a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row :gutter="20">
                    <a-col v-if="formData.source !== '野生'" :span="8">
                        <a-form-model-item :label-col="{ span: 6 }"  label="是否需要基地信息">
                            <a-switch v-model="localNeedBaseVar" @change="localNeedBaseVarChange"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col v-if="formData.source !== '野生'" :span="8">
                        <a-form-model-item :label-col="{ span: 5 }" label="是否开启地图">
                            <a-switch v-model="localNeedMapVar"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>

                <a-row :gutter="20">
                    <a-row style="margin-bottom: 20px">
                        <a-card>
                            <a-button type="default" style="margin-right: 20px" @click="templateTableShow=true">选择模板</a-button>
                            <a-button type="primary" style="margin-right: 20px" @click="showQrCode">生成填写二维码</a-button>
                        </a-card>
                    </a-row>
                    <a-row v-if="formData.source == '野生'">
                       <a-card title="采集管理">
                           <a-col :span="8">
                                <a-form-model-item label="采集时间" prop="gatherTime">
                                    <a-date-picker :disabled="!allowEdit" :locale="locale" class="w-300" valueFormat="YYYY-MM-DD" v-model="formData.gatherTime" placeholder="选择日期" />
                                </a-form-model-item>
                           </a-col>
                           <a-col :span="8">
                               <a-form-model-item label="采集地方" prop="gatherPlace">
                                   <a-input :disabled="!allowEdit" class="w-300"  v-model="formData.gatherPlace" placeholder="请输入采集地"></a-input>
                               </a-form-model-item>
                           </a-col>
                           <a-col :span="8">
                               <a-form-model-item label="采集人" prop="gatherer">
                               <a-input :disabled="!allowEdit" class="w-300"  v-model="formData.gatherer" placeholder="请输入采集人"></a-input>
                           </a-form-model-item>
                           </a-col>
                           <a-col :span="8">
                               <a-form-model-item label="初加工流程" prop="processFlow">
                                   <a-textarea :disabled="!allowEdit" class="w-300" :rows="4" v-model="formData.processFlow" placeholder="请填写初加工流程"/>
                               </a-form-model-item>
                           </a-col>
                           <!-- <a-col :span="8">
                               <a-form-model-item v-if="pageReady" label="加工图片" prop="processPicture">
                                   <Upload v-if="allowEdit" :uploadLength="1" :defImgList="[formData.processPicture]" @uploadChange="processPictureUpload"></Upload>
                                   <img v-else class="detailImg" :src="formData.processPicture"/>
                               </a-form-model-item>
                           </a-col> -->
<!--                           <a-col :span="8">-->
<!--                               <a-form-model-item v-if="pageReady" label="检测报告" prop="inspectionReport">-->
<!--                                   <Upload v-if="allowEdit" :uploadLength="1" :defImgList="[formData.inspectionReport]" @uploadChange="inspectionReportPictureUpload"></Upload>-->
<!--                                   <img v-else class="detailImg" :src="formData.inspectionReport"/>-->
<!--                               </a-form-model-item>-->
<!--                           </a-col>-->
                       </a-card>
                    </a-row>
                    <a-tabs v-else type="card" :default-active-key="0">
                        <a-tab-pane style="margin-top: 20px" :key="0" tab="药材基本信息">
                            <a-row :gutter="20">
                                <a-col :span="8">
                                    <a-form-model-item label="基地类型" prop="baseType">
                                        <a-select :disabled="!allowEdit"  class="w-300" v-model="formData.baseType" placeholder="请选择基地类型">
                                            <a-select-option value="一般基地">一般基地</a-select-option>
                                            <a-select-option value="GAP基地">GAP基地</a-select-option>
                                            <a-select-option value="三五一全基地">三五一全基地</a-select-option>
                                            <a-select-option value="GACP基地">GACP基地</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="8" v-if="formData.baseType == 'GAP基地'">
                                    <a-form-model-item label="GAP证书" prop="baseCertificate">
                                        <div v-if="allowEdit">
                                            <Upload  :uploadLength="1" :defImgList="[formData.baseCertificate]" @uploadChange="baseCertificateUpload"></Upload>
                                            <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>
                                        </div>
                                        <img v-else class="detailImg" :src="formData.baseCertificate"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="20">
                                <a-col :span="8" v-if="formData.baseType == 'GAP基地'">
                                    <a-form-model-item label="基地名称" prop="baseName">
                                        <a-input :disabled="!allowEdit" class="w-300" v-model="formData.baseName" placeholder="请输入基地名称"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="20">
<!--                                <a-col :span="8">-->
<!--                                    <a-form-model-item label="基地位置" prop="baseLocation">-->
<!--                                        <a-cascader :disabled="!allowEdit" class="w-300" :options="areaList" placeholder="请选择所在区域" @change="locationChange"/>-->
<!--                                    </a-form-model-item>-->
<!--                                </a-col>-->
                                <a-col :span="8">
                                    <a-form-model-item label="基地位置" prop="baseLocation">
                                        <a-input :disabled="!allowEdit" v-model="formData.baseLocation" class="w-300" placeholder="请输入基地位置"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col v-if="localNeedMapVar" :span="8">
                                    <a-icon type="question-circle" style="color: red;font-size: 20px" />*
                                    <a-popover title="基地经纬度">
                                        <template slot="content">
                                            <p style="width: 300px;">
                                                <h3>请在地图上指定基地经纬度，否则默认位北京天安门</h3>
                                            </p>
                                        </template>
                                        <span>基地经纬度：{{getCoordinate}}</span>
                                    </a-popover>
                                </a-col>
                            </a-row>
                            <a-row :gutter="20">
                                <a-col v-if="formData.source != '野生' && localNeedMapVar">
                                <gis-map :disabled="!allowEdit" v-if="visible" style="width: 100%;height:500px;" :center="mapCenter" @markerLngLat="getMarkerLocation"></gis-map>
                            </a-col>
                            </a-row>
                            <a-row style="margin-top: 20px" :gutter="20">
                                <a-col :span="8">
                                    <a-form-model-item label="生长周期" prop="plantAgeLimit">
                                        <a-input-number :disabled="!allowEdit" class="w-300" v-model="formData.plantAgeLimit" placeholder="请输入生产周期"/>&nbsp年
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-model-item label="种植时间" prop="plantTime">
                                        <a-input :disabled="!allowEdit" class="w-300" v-model="formData.plantTime" placeholder="请输入种植时间"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-model-item label="采收时间" prop="recoveryTime">
                                        <a-input :disabled="!allowEdit" class="w-300" v-model="formData.recoveryTime" placeholder="请输入采收时间"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="20">
                                <a-col :span="8">
                                    <a-form-model-item label="初加工方法" prop="processFlow">
                                        <a-textarea :disabled="!allowEdit" class="w-300" :rows="4" v-model="formData.processFlow" placeholder="请填写初加工方法"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                            <a-row :gutter="20">
                                <a-col :span="8">
                                    <a-form-model-item v-if="pageReady" label="种植图片" prop="plantPicture">
                                        <div v-if="allowEdit">
                                            <Upload  :uploadLength="1" :defImgList="[formData.plantPicture]" @uploadChange="plantPictureUpload"></Upload>
                                            <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>
                                        </div>
                                        <img v-else class="detailImg" :src="formData.plantPicture"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="8">
                                    <a-form-model-item v-if="pageReady" label="采收及加工图片" prop="recoveryPicture">
                                        <div v-if="allowEdit">
                                            <Upload :uploadLength="1" :defImgList="[formData.recoveryPicture]" @uploadChange="recoveryPictureUpload"></Upload>
                                            <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>
                                        </div>
                                        <img v-else class="detailImg" :src="formData.recoveryPicture"/>
                                    </a-form-model-item>
                                </a-col>
<!--                                <a-col :span="8">-->
<!--                                    <a-form-model-item v-if="pageReady" label="加工图片" prop="processPicture">-->
<!--                                       <div v-if="allowEdit">-->
<!--                                           <Upload  :uploadLength="1" :defImgList="[formData.processPicture]" @uploadChange="processPictureUpload"></Upload>-->
<!--                                           <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>-->
<!--                                       </div>-->
<!--                                        <img v-else class="detailImg" :src="formData.processPicture"/>-->
<!--                                    </a-form-model-item>-->
<!--                                </a-col>-->
                            </a-row>
                        </a-tab-pane>
                        <a-tab-pane style="margin-top: 20px" :key="1" tab="高级信息">
                            <a-row style="margin-bottom: 20px">
                                <a-card title="基地信息">
                                    <a-row :gutter="20">
                                        <a-col :span="8">
                                            <a-form-model-item label="海拔" prop="baseAltitude">
                                                <a-input-number :disabled="!allowEdit" v-model="formData.baseAltitude" class="w-300" placeholder="请输入海拔"/>&nbsp;m
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-model-item label="平均气温" prop="averageLapseRate">
                                                <a-input-number :disabled="!allowEdit" v-model="formData.averageLapseRate" class="w-300" placeholder="请输入平均气温"/>&nbsp;℃
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-model-item label="地貌" prop="landform">
                                                <a-input :disabled="!allowEdit" v-model="formData.landform" class="w-300" placeholder="请输入地貌"/>
                                            </a-form-model-item>
                                        </a-col>
                                    </a-row>
                                </a-card>
                            </a-row>
                            <a-row style="margin-bottom: 20px">
                                <a-card title="种植信息">
                                    <a-row :gutter="20">
                                        <a-col :span="8">
                                            <a-form-model-item label="需要单独育苗" prop="whetherNeedNursery">
                                                <a-select :disabled="!allowEdit" v-model="formData.whetherNeedNursery" class="w-300" placeholder="请选择">
                                                    <a-select-option value="否">否</a-select-option>
                                                    <a-select-option value="是">是</a-select-option>
                                                </a-select>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-model-item label="繁殖方式" prop="breedWay">
                                                <a-input :disabled="!allowEdit" v-model="formData.breedWay" class="w-300" placeholder="请输入繁殖方式"/>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-model-item label="栽种月份" prop="growMonth">
                                                <a-input-number :disabled="!allowEdit" v-model="formData.growMonth" class="w-300" placeholder="请输入栽种月份"/>&nbsp;月
                                            </a-form-model-item>
                                        </a-col>
                                    </a-row>
                                    <a-row class="arrs-box" :gutter="20" v-for="(item,i) in formData.inventoryTasks">
                                        <a-col :span="8">
                                            <a-form-model-item label="选择农事任务" prop="task">
                                                <a-select :disabled="!allowEdit" v-model="item.task" class="w-300" placeholder="请选择农事任务">
                                                    <a-select-option value="播种移栽">播种移栽</a-select-option>
                                                    <a-select-option value="除草">除草</a-select-option>
                                                    <a-select-option value="灌溉">灌溉</a-select-option>
                                                    <a-select-option value="排水">排水</a-select-option>
                                                    <a-select-option value="施肥">施肥</a-select-option>
                                                    <a-select-option value="病虫害防治">病虫害防治</a-select-option>
                                                </a-select>
                                            </a-form-model-item>
                                            <a-form-model-item label="开始时间" prop="beginTime">
                                                <a-date-picker :disabled="!allowEdit" :locale="locale" v-model="item.beginTime" valueFormat="YYYY-MM-DD" class="w-300" placeholder="请选择开始时间"/>
                                            </a-form-model-item>
                                            <a-form-model-item label="结束时间" prop="endTime">
                                                <a-date-picker :disabled="!allowEdit" :locale="locale" v-model="item.endTime" valueFormat="YYYY-MM-DD" class="w-300" placeholder="请选择结束时间"/>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-model-item label="方法" prop="way">
                                                <a-textarea :rows="7" :disabled="!allowEdit" v-model="item.way" class="w-300" placeholder="请输入方法"/>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :span="6">
                                            <a-form-model-item label="照片上传" prop="picture" v-if="pageReady">
                                                <Upload v-if="allowEdit" :uploadLength="1" :defImgList="[item.picture]" @uploadChange="arrUpload($event,i)"></Upload>
                                                <img v-else class="detailImg" :src="item.picture || 'https://www.chinahomes.cn/static/images/nopic.png'"/>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :span="2">
                                            <div style="height: 192px;display:flex;flex-direction:column;justify-content: center">
                                                <a-button v-if="formData.inventoryTasks.length!=1" style="margin-bottom: 10px" :disabled="!allowEdit" type="danger" @click="removeOne(i)">删除</a-button>
                                                <a-button v-if="i==formData.inventoryTasks.length-1" :disabled="!allowEdit" style="margin-bottom: 10px" type="primary" @click="addTask(i)">新增任务</a-button>
                                            </div>
                                        </a-col>
                                    </a-row>
                                </a-card>
                            </a-row>
                            <a-row style="margin-bottom: 20px">
                                <a-card title="采收信息">
                                    <a-col :span="8">
                                        <a-form-model-item label="采收方式" prop="recoveryMethod">
                                            <a-textarea :disabled="!allowEdit"  :rows="4"  v-model="formData.recoveryMethod" class="w-300" placeholder="请输入采收方式"/>
                                        </a-form-model-item>
                                    </a-col>
                                </a-card>
                            </a-row>
                            <a-row style="margin-bottom: 20px">
                                <a-card title="加工信息">
                                    <a-col :span="8">
                                        <a-form-model-item label="详细加工流程" prop="inDetailProcessFlow">
                                            <a-textarea :disabled="!allowEdit"  :rows="5"  v-model="formData.inDetailProcessFlow" class="w-300" placeholder="请输入采收方式"/>
                                        </a-form-model-item>
                                    </a-col>
                                </a-card>
                            </a-row>
                        </a-tab-pane>
                    </a-tabs>
                </a-row>
            </div>
        </a-form-model>
        <div slot="footer">
            <a-button @click="modalOption.onCancel">取消</a-button>
            <a-button type="primary" @click="saveTemplate">保存模板</a-button>
            <a-button type="primary" :loading="modalOption.loading" @click="modalOption.onOk">保存</a-button>
        </div>
        <template-table :materialRelevanceId="formData.materialRelevanceId" :visible="templateTableShow" @ok="getTemplateInfo" @cancel="templateTableShow=false"></template-table>
        <preview-image :previewVisible="qrCodeVisible" :imgList="QRCode" @close="qrCodeVisible=false"></preview-image>
    </a-modal>
</template>
<script lang="ts">
import nextApi, {MaterialListRes} from "@/api/nextApi";
import {Component, Prop, Vue, Watch} from "vue-property-decorator";
import Upload from "@/components/upload.vue";
import gisMap from "@/components/gisMap.vue";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import area, {getAreaWords} from '@/utils/area'
import TemplateTable from "@/views/appViews/rowMaterialIncoming/components/templateTable.vue";
import previewImage from "@/components/previewImage.vue";
@Component({
    name:'editTraceability',
    components:{
        Upload,
        gisMap,
        TemplateTable,
        previewImage
    }
})
export default class extends Vue{
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) editId!: string;
    @Watch("visible")
    visibleChange() {
        if(this.visible){
            setTimeout(()=>{
                this.pageReady = true
            },1000)
            this.localNeedBaseVar = true
            this.localNeedMapVar = true
            this.getVarietyNameList()
            this.getUnitList()
            //重置表单
            this.$nextTick(()=>{
                (this.$refs.formData as any).resetFields()
            })
        }
        if(!this.visible) this.mapCenter = [39.904966,116.391358]
        if(this.visible && this.editId)this.getMedHerbInfo()
    }
    localNeedBaseVar = true
    localNeedBaseVarChange(value:boolean){
        if(value){
            this.rules.baseType = [{ required: true, message: '请选择基地类型', trigger: 'blur' }]
            this.rules.baseName = [{ required: true, message: '请输入基地名称', trigger: 'blur' }]
            this.rules.baseCertificate = [{ required: true, message: '请输入基地证书', trigger: 'blur' }]
            this.rules.baseLocation = [{ required: true, message: '请输入基地位置', trigger: 'blur' }]
        }else{
            this.rules.baseType = [{ required: false, message: '请选择基地类型', trigger: 'blur' }]
            this.rules.baseName = [{ required: false, message: '请输入基地名称', trigger: 'blur' }]
            this.rules.baseCertificate = [{ required: false, message: '请输入基地证书', trigger: 'blur' }]
            this.rules.baseLocation = [{ required: false, message: '请输入基地位置', trigger: 'blur' }]
        }
    }
    localNeedMapVar = true
    allowEdit = true
    locale:any = locale;
    modalOption = {
        width:'90%',
        title: "填写/编辑溯源信息",
        okText: "确定",
        cancelText: "取消",
        loading:false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    formData:any = {
        rawType:'',//原料类型
        enterStorageBatch:'',
        supplierName:'',
        source:'自培育',
        varietyName:"",
        indate:'',
        venderProductionBatch:'',
        materialCode:'',
        enterStorageNum:'',//入库数量
        unit:'',
        enterStorageType:'溯源入库',
        placeOfOrigin:'',
        warehouse:'',
        baseName:'',
        baseLocation:'',
        coordinate:[{lng:'',lat:''}],
        baseType:'',
        baseCertificate:'',
        plantAgeLimit:'',
        recoveryTime:'',
        processFlow:'',
        plantPicture:'',
        recoveryPicture:'',
        processPicture:'',
        whetherAllowAmend:1,
        plantTime:'',//11.19新增字段生长周期
        //当药材类别为植物或矿物并且都是野生时的参数
        gatherTime:'',
        gatherPlace:'',
        gatherer:'',
        //👇无用参数数据库根本没这个字段，但是UI图上有
        inspectionReport:'',

        //高级信息中的字段
        baseAltitude:'',//海拔
        averageLapseRate:'',//平均气温
        landform:'',//地貌
        whetherNeedNursery:'',//是否需要育苗
        breedWay:'',//繁殖方式
        growMonth:'',//栽种月份
        inventoryTasks:[],//农事任务
        recoveryMethod:'',//采收方式
        inDetailProcessFlow:'',//详细加工流程
    }

    rules = {
        name: [
            { required: true, message: "请输入模板名称", trigger: "blur" },
        ],
        varietyName: [
            { required: true, message: "请选择品种名称", trigger: "change" },
        ],
        source: [
            { required: true, message: "请选择来源", trigger: "change" },
        ],
        placeOfOrigin: [
            { required: true, message: "请选择产地", trigger: "change" },
        ],
        baseType: [
            { required: true, message: "请选择基地类型", trigger: "change" },
        ],
        baseCertificate: [
            { required: true, message: "请上传基地证书", trigger: "blur" },
        ],
        baseName: [
            { required: true, message: "请输入基地名称", trigger: "blur" },
        ],
        baseLocation: [
            { required: true, message: "请选择基地所在地", trigger: "change" },
        ],
        plantAgeLimit: [
            { required: false, message: "请输入生长周期", trigger: "blur" },
        ],
        recoveryTime: [
            { required: false, message: "请输入采收时间", trigger: "blur" },
        ],
        plantTime: [
            { required: false, message: "请输入种植时间", trigger: "blur" },
        ],
        processFlow: [
            { required: false, message: "请输入加工流程", trigger: "blur" },
        ],
        plantPicture: [
            { required: false, message: "请上传种植图片", trigger: "blur" },
        ],
        recoveryPicture: [
            { required: false, message: "请上传采收图片", trigger: "blur" },
        ],
        processPicture: [
            { required: false, message: "请上传加工图片", trigger: "blur" },
        ],
        coordinate: [
            { validator:(rules:any,value:any,callback:any)=>{
                    if(value){
                        callback()
                    }else{
                        callback(new Error('请在地图上选择经纬度'))
                    }
                }, trigger: "blur" },
        ],
        gatherTime: [
            { required: false, message: "请输入采收时间", trigger: "blur" },
        ],
        gatherPlace: [
            { required: false, message: "请输入采收地", trigger: "blur" },
        ],
        gatherer: [
            { required: false, message: "请输入采收人", trigger: "blur" },
        ],
    };
    varietyNameList :MaterialListRes[] = [];
    placeOfOriginList:string[] = [];
    areaList:any[] = area
    mapCenter:any[] = [39.904966,116.391358]
    pageReady = false
    modalOk(){
        (this.$refs.formData as any).validate(async (valid: boolean) => {
            if (valid) {
                this.modalOption.loading = true
                this.formData.ifNeedBaseInfo = this.localNeedBaseVar ? 1 : 0
                this.formData.ifOpenMap = this.localNeedMapVar ? 1 : 0
                console.log('表单参数：',this.formData)
                if(this.formData.fillInDataState == 0) this.formData.fillInDataState = 1
                const res = await nextApi.addRawInfo(this.formData)
                console.log(res)
                if(res.code === 200){
                    this.$message.success(res.msg)
                    this.closeModal()
                }
                this.modalOption.loading = false
            }
        });
    }
    closeModal(){
        this.pageReady = false
        this.$emit("closeModal");
    }
    /**
     * @description 一些数据处理和逻辑
     * **/
    //获取单位列表
    unitList:any[] = []
    async getUnitList(){
        const res = await nextApi.getUnitList()
        this.unitList = res.data
        this.formData.unit = res.data[0].unit
    }
    //如果有id查询当前id的信息反填数据
    async getMedHerbInfo(){
        const res:any = await nextApi.getRawInboundDetail({id:this.editId})
        console.log('当前id信息：',res)
        if(res.code === 200){
            this.formData = res.data
            this.localNeedBaseVar = this.formData.ifNeedBaseInfo == 1 ? true : false
            this.localNeedMapVar = this.formData.ifOpenMap == 1 ? true : false
            this.localNeedBaseVarChange(this.localNeedBaseVar)
            const {coordinate} = this.formData
            console.log('从数据库获取到的经纬度：',this.formData.coordinate)
            if(this.formData.coordinate && this.formData.coordinate[0].lng){
                this.mapCenter = [coordinate[0].lat,coordinate[0].lng]
            }else{
                this.formData.coordinate = [{lng:116.391358,lat:39.904966}]
            }
            //如果没有农事任务默认给一条待提交农事任务
            if(this.formData.inventoryTasks?.length == 0){
                this.formData.inventoryTasks.push({
                    task:'',
                    way:'',
                    beginTime:'',
                    endTime:'',
                    picture:'',
                })
            }
        }
        console.log('根据id查询的当前品名：',this.formData.varietyName)
    }
    async getVarietyNameList(){
        let params = {
            productType:'中药材',
            state:0,
        }
        const res = await nextApi.getMaterialList(params)
        if(res.data){
            this.varietyNameList = res.data.rows
        }
    }
    getMarkerLocation(lngLat:any){
        this.formData.coordinate = [{lng:lngLat[0],lat:lngLat[1]}]
        console.log('从地图上获取到的基地坐标：',this.formData.coordinate)
    }
    // locationChange(value:string[]){
    //     this.formData.baseLocation = getAreaWords(value)
    // }
    // locationInputBlur(event:any){
    //     let value = event.target.value
    //     this.formData.baseLocation+value
    // }
    //删除一条待提交农事任务
    removeOne(i){
        this.formData.inventoryTasks.splice(i,1)
    }
    //新增一条待提交的农事任务
    addTask(){
        this.formData.inventoryTasks.push({
            task:'',
            way:'',
            beginTime:'',
            endTime:'',
            picture:'',
        })
    }
    /**
     * @description 上传器器回调
     * **/
    baseCertificateUpload(imageList:any){
        imageList.length ? this.formData.baseCertificate = imageList[0].url: this.formData.baseCertificate = ''
    }
    plantPictureUpload(imageList:any){
        imageList.length ? this.formData.plantPicture = imageList[0].url: this.formData.plantPicture = ''
    }
    recoveryPictureUpload(imageList:any){
        imageList.length ? this.formData.recoveryPicture = imageList[0].url: this.formData.recoveryPicture = ''
    }
    processPictureUpload(imageList:any){
        imageList.length ? this.formData.processPicture = imageList[0].url: this.formData.processPicture = ''
    }
    inspectionReportPictureUpload(imageList:any){
        imageList.length ? this.formData.inspectionReport = imageList[0].url: this.formData.inspectionReport = ''
    }
    arrUpload(imageList:any,i:number){
        imageList.length ? this.formData.inventoryTasks[i].picture = imageList[0].url: this.formData.inventoryTasks[i].picture = ''
    }
    jump(url: string) {
        window.open(url);
    }
    mounted(){
    }
    /**
     * @description 计算属性
     * **/
    get getCoordinate(){
        let str = ''
        if(this.formData.coordinate?.length){
            str = this.formData.coordinate[0].lng+','+this.formData.coordinate[0].lat
            return str
        }
    }


    templateTableShow = false
    getTemplateInfo(data){
        //将当前formData中的数据和data拼接
        this.pageReady = false
        console.log(data,'模板的信息')
        this.$nextTick(()=>{
            this.pageReady = true
            data.templateId = data.id
            let originId = this.formData.id
            this.formData = {...this.formData,...data}
            this.formData.id = originId
            console.log(this.formData,'选择模板后合并的表单数据')
            this.localNeedBaseVar = this.formData.ifNeedBaseInfo == 1 ? true : false
            this.localNeedMapVar = this.formData.ifOpenMap == 1 ? true : false
            this.allowEdit = this.formData.whetherAllowAmend === 0;
            this.templateTableShow = false
            this.mapCenter = [this.formData.coordinate[0].lat,this.formData.coordinate[0].lng]
        })
    }
    saveTemplate(){
        (this.$refs.formData as any).validate(async (valid: boolean) => {
            if (valid) {
                this.modalOption.loading = true
                console.log('表单参数：',this.formData)
                const res = await nextApi.editOrAddMedHerb(this.formData)
                console.log(res)
                if(res.code === 200){
                    this.$message.success(res.msg)
                    this.closeModal()
                }
                this.modalOption.loading = false
            }
        });
    }
    //弹窗展示二维码
    qrCodeVisible = false
    QRCode:any[] = []
    showQrCode(){
        this.QRCode = []
        this.qrCodeVisible = true
        nextApi.getQrCode({id:this.editId},(res)=>{
            const blob = new Blob([res.data], {type: "image/jpeg",});
            this.QRCode.push(URL.createObjectURL(blob))
            console.log(this.QRCode)
        })

    }
}
</script>
<style lang="scss">
.btn-input{
    display: flex;
    .inside-input{
        width: 213px !important;
    }
    .ant-input{
        flex-shrink: 0;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .inside-input .ant-select-selection{
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .btn-selector .ant-select-selection{
        border-radius:0;
        background-color: rgba(0, 166, 125, 0.12);
        width: 88px;
    }
    .btn-selector .ant-select .ant-select-enabled{
        width: 88px !important;
    }

}

</style>
<style scoped lang="scss">
.w-300{
    width: 300px !important;
}
.content-box{
    padding: 20px;
    border: 1px solid #ccc;
}
.detailImg{
    width: 200px;
    height: 200px;
}
form .ant-select, form .ant-cascader-picker{
    width: initial;
}
.arrs-box{
    padding: 20px 0;
    border: 1px solid #c8c8c8;
    margin-bottom: 10px;
}
</style>
